<template>
    <div class="songList">
        <div class="changType w">
            <div
                class="allChangType"
                @click="hiddenChangeTypeBox = !hiddenChangeTypeBox"
            >
                <span>{{ currentType.tag }}</span>
                <i class="el-icon-arrow-down"></i>
                <div class="changTypeHiddenBox" v-show="hiddenChangeTypeBox">
                    <div class="type-item" v-for="item in typeList">
                        <div class="type-title">
                            <div class="img-box">
                                <!-- <img
                                    :src="
                                        `../../assets/images/${item.title}` +
                                        '.png'
                                    "
                                /> -->
                                <img
                                    src="../../assets/images/主题.png"
                                    alt=""
                                />
                            </div>
                            <div class="title-text">
                                <span>{{ item.title }}</span>
                            </div>
                        </div>
                        <div class="type-tag">
                            <ul>
                                <li
                                    v-for="elem in item.tags"
                                    @click="myChangeType(elem.name)"
                                    :key="item.id"
                                >
                                    <span>{{ elem.name }}</span>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
            <div class="changTypeTags">
                <div class="changTypeTags-title">
                    <em>热门标签：</em>
                </div>
                <div class="tagsList">
                    <ul>
                        <li
                            v-for="item in hotTags"
                            :key="item.id"
                            @click="myChangeType(item.name)"
                            :class="
                                item.name == currentType.tag
                                    ? 'selectedType'
                                    : ''
                            "
                        >
                            <span>{{ item.name }}</span>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="sortingType">
                <ul>
                    <li
                        :class="currentType.order == 'hot' ? 'orderType' : ''"
                        @click="myChangeOrder('hot')"
                    >
                        <span>热门</span>
                    </li>
                    <li
                        :class="currentType.order == 'new' ? 'orderType' : ''"
                        @click="myChangeOrder('new')"
                    >
                        <span>最新</span>
                    </li>
                </ul>
            </div>
        </div>
        <div class="songList-box w" v-loading="loading">
            <div
                class="songList-item"
                v-for="item in songList.playlists"
                :key="item.id"
                :data-id="item.id"
                @click="playListJumpDetails(item.id)"
            >
                <div class="img-box">
                    <img :src="item.coverImgUrl" alt="" />
                    <div class="playCount">
                        <i class="el-icon-headset"></i>
                        <span>{{ huansuan(item.playCount) }}</span>
                    </div>
                </div>
                <div class="content-box">
                    <p>{{ item.name }}</p>
                </div>
            </div>
        </div>
        <div class="page-box w">
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentType.currentPage"
                layout="total,  prev, pager, next, jumper"
                :total="songList.total"
                :page-size="currentType.limit"
                background
            >
            </el-pagination>
        </div>
    </div>
</template>

<script>
import { huansuan } from "../../utils/common";
import { createNamespacedHelpers } from "vuex";
import { truncate } from "fs";
const { mapState, mapMutations, mapActions } = createNamespacedHelpers(
    "songlist"
);
export default {
    data() {
        return {
            hiddenChangeTypeBox: false,
        };
    },
    computed: {
        ...mapState([
            "songList",
            "currentType",
            "typeList",
            "loading",
            "hotTags",
        ]),
    },
    mounted() {
        this.huansuan = huansuan;
    },
    created() {
        this.getCatList();
        this.getHotlist();
        this.getPlayList();
    },
    methods: {
        ...mapActions(["getCatList", "getHotlist", "getPlayList"]),
        ...mapMutations(["changeCurrentType", "changeType", "changeOrder"]),
        //分页
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
            this.changeCurrentType(val);
            this.getPlayList();
            console.log(val);
        },
        playListJumpDetails(val) {
            this.$router.push("/home/playlist-details/" + val);
        },
        myChangeType(val) {
            this.changeType(val);
            this.getPlayList();
        },
        myChangeOrder(val) {
            this.changeOrder(val);
            this.getPlayList();
        },
    },
};
</script>

<style lang='scss' scoped>
@import "../../assets/sass/songList.scss";

</style>